<!--个人主页页面-->
<template>
    <div><!--这里需要传一个 currentUser 参数  因为导航栏要使用，不传会报错-->
        <!--后面优化应该把用户信息写在组件里面，不然每个引用这个组件的页面都得自己定义这个currentUser js对象并从后台获取，代码重用率太低了-->
<!--        <top-nav v-bind:currentUser="currentUser"></top-nav>-->
        <top-nav @updateUser="setCurrentUser"></top-nav>
        <!--        <h1 class="center margin_top_55">我的个人主页</h1>-->

        <!--页面主体内容-->
        <el-row type="flex" justify="center">
            <el-col :span="18" class="border">
                <!--上半部分的导航-->
                <div>
                    <!--背景图 + 用户头像等 -->
                    <el-row class="top_head_row">
                        <!--头像-->
                        <el-col :span="2" :offset="5" style="margin-top: 110px">
                            <!--本页面 跳转-->
                            <a href="#">
                                <el-avatar style="border: white 2px solid" fit="contain" :size="85"
                                           :src="indexUser.headImg" ></el-avatar>
<!--                                           :src="require('../../assets/images/userAvatarDemo.jpg')" ></el-avatar>-->
                            </a>
                        </el-col>
                        <!--用户昵称等-->
                        <el-col :span="10" class="font" style="color: white">
                            <div style="margin-top: 126px; background-color: rgba(105,55,37,0.58); padding-left: 6px; border-radius: 0 15px 0 0">
                                <span style="font-size: 20px; font-weight: bold; font-family: 宋体,serif">{{indexUser.nickName}}</span>
                                <img :src="require('../../assets/images/male.png')" alt="男" style="width: 28px; margin-left: 6px">

                                <span style="margin-left: 28px">
                                    论龄：<span v-if="indexUser.age > 0">{{indexUser.age}}</span>
                                    <span v-else>不到1</span> 年
                                </span>
                            </div>
                            <div style="padding-top: 8px;background-color: rgba(2,169,244,0.63); padding-left: 6px; border-radius: 0 0 15px 5px">
                                “{{indexUser.motto}}”
<!--                                “我就是我，是颜色不一样的烟火~！”-->
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 主页导航栏 -->
                    <el-row>
                        <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelectNav">
                            <el-menu-item index="1">帖子</el-menu-item>
                            <el-menu-item index="2">贴吧</el-menu-item>
                            <el-menu-item index="3">收藏</el-menu-item>
                            <el-menu-item index="4">私密</el-menu-item>
                            <el-menu-item index="5">个人资料</el-menu-item>
                            <el-menu-item index="6">安全设置</el-menu-item>
<!--                            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
                        </el-menu>
                    </el-row>
                </div>

                <!--下半部分的导航对应显示内容-->
                <div style="border-top: solid 1px #e6e6e6; margin-top: 20px; padding-bottom: 30px;" >
                    <!--用户点击 帖子、贴吧、收藏或私密-->
                    <el-row v-if="parseInt(currentIndex)>=1 && parseInt(currentIndex)<=4" style="">
                        <!--左边 搜索及个人信息-->
                        <el-col :span="6" style="">
                            <!--上面的 帖子数、评论数、加入贴吧-->
                            <el-row class="center left_border" type="flex" justify="space-between"
                                    style="padding: 25px 10px; background-color: #F2F6FC">
                                <el-col :span="6" class=" ">
                                    <div class="item_num_head">帖子数</div>
                                    <div class="item_num_count">{{countInfo.postCount}}</div>
                                </el-col>
                                <el-col :span="6" class="">
                                    <div class="item_num_head">评论数</div>
                                    <div class="item_num_count">{{countInfo.prCount}}</div>
                                </el-col>
                                <el-col :span="6" class="">
                                    <div class="item_num_head">加入贴吧</div>
                                    <div class="item_num_count">{{countInfo.barCount}}</div>
                                </el-col>
                            </el-row>
                            <!--下面的搜索等-->
                            <div class="left_border" style="background-color: rgb(250, 250, 250); padding-top: 15px; height: 500px; border-bottom-right-radius: 20px">
                                <el-row class="font" style="padding-left: 15px">共 {{totalRs}} 条记录。</el-row>
                                <el-row type="flex" justify="center" class="margin_top_20">
                                    <el-col :span="18">
                                        <el-input size="medium" v-model="searchWd" placeholder="(模块内搜索)" clearable suffix-icon="el-icon-edit"></el-input>
                                    </el-col>
                                </el-row>
                                <el-row class="margin_top_10">
                                    <el-col :span="10" :offset="12">
                                        <el-button type="primary" @click="doSearch" size="small" round icon="el-icon-search">搜索</el-button>
                                    </el-col>
                                </el-row>
                                <div style="margin-top: 160px; margin-left: 40px">
                                    <el-image
                                            style="width: 120px; height: 120px"
                                            :src="require('../../assets/images/hithh.png')"
                                            fit="contain"></el-image>
                                </div>
                            </div>
                        </el-col>

                        <!--右边  帖子  或  贴吧  列表-->
                        <el-col :span="18" style="padding: 0 20px;">
                            <!--帖子-->
                            <div v-if="currentIndex === '1'">
                                <postList ref="myPostList" @setTotal="setTotalRs"></postList>
                            </div>
                            <div v-else-if="currentIndex === '2'">
                            <!--贴吧-->
                                <!--用v-if 的话 初始就不会渲染该节点，就不会在 mounted里 通过ref获取到节点来初始化帖子列表-->
                                <!--v-show 都会渲染  只是显示不显示的问题-->
                                <barList ref="userBarList" v-show="this.totalRs !== 0" @setTotal="setTotalRs"></barList>
<!--                                <el-result icon="info" title="信息" subTitle="该用户目前还没有加入任何贴吧！" >-->
<!--                                    <template slot="extra">-->
<!--                                        <el-button type="primary" size="medium">返回</el-button>-->
<!--                                    </template>-->
<!--                                </el-result>-->
                                <el-empty v-show="this.totalRs === 0" description="暂无结果"></el-empty>
                            </div>
                            <!--收藏  （只有访问自己主页时才显示）-->
                            <div v-else-if="currentIndex === '3'">
                                <div v-if="currentUser.uname === this.indexUname">
                                    <postList ref="cltPostList" @setTotal="setTotalRs"></postList>
<!--                                    收藏-->
                                </div>
                                <div v-else>
                                    <el-result icon="info" title="权限不足" subTitle="你暂时没有权限查看此部分内容。">
                                        <template slot="extra">
                                            <el-button type="primary" size="medium">我的主页</el-button>
                                        </template>
                                    </el-result>
                                </div>
                            </div>
                            <!--（自己的）私密帖子   只有访问自己的主页才显示-->
                            <div v-else-if="currentIndex === '4'">
<!--                                私密-->
                                <div v-if="currentUser.uname === this.indexUname">
                                    <postList ref="pvtPostList" @setTotal="setTotalRs"></postList>
                                </div>
                                <div v-else>
                                    <el-result icon="info" title="权限不足" subTitle="你暂时没有权限查看此部分内容。">
                                        <template slot="extra">
                                            <el-button type="primary" size="medium">我的主页</el-button>
                                        </template>
                                    </el-result>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <!--用户点击个人资料 或 安全设置-->
                    <el-row v-else>
                        <div v-if="currentIndex === '5'">
                            <!--isMyIndex 将方法的返回值 作为参数 记得加上 this.-->
                            <el-row type="flex" justify="center">
                                <el-col :span="18">
                                    <personInfo @updateInfo="updateCurrentUser" v-bind:indexUname="indexUname" v-bind:isMyIndex="this.isMyIndex()"></personInfo>
                                    <br><br><br>
                                    <br><br><br>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-if="currentIndex === '6'">安全设置</div>
                    </el-row>
                </div>
            </el-col>
        </el-row>

        <!--底部版权-->
        <footer>
<!--            <copyRight hidden="hidden"></copyRight>-->
            <copyRight></copyRight>
        </footer>

    </div>
</template>

<script>
    import navigateBar from "@/components/component/navigateBar";
    import btmCopyRight from "@/components/component/btmCopyRight";
    import indexPostList from "@/components/component/indexPostList";
    import barList from "@/components/component/barList";
    import personInfo from "@/components/component/personInfo";

    export default {
        name: "myIndex",
        data(){
            return{
                // currentUser: { /*当前用户*/
                //     headImg: '',  /*头像图片在服务器存储的文件名  （以用户名保存）*/
                //     nickName: '',
                //     motto: '',
                //     role: '',
                // },
                currentUser: {}, /*当前用户*/
                currentIndex: '1', // 当前选中的菜单，默认为1.d
                searchWd: '', // 搜索输入框内容
                indexUser: {}, // 当前主页的主人信息
                indexUname: '', // 当前主页的 主人 uname
                pageSize: 5, // 搜索结果分页显示，每页显示多少条结果
                totalRs: 0, // 搜索结果总的条目数

                // 左边的用户数量信息(包括 发帖数、评论数和加入贴吧数) 初始化都为0
                countInfo: {
                    postCount: 0,
                    prCount: 0,
                    barCount: 0
                },
            }
        },
        created(){
            /*初始化用户信息*/
            // this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userGet).then(req=>{
            //     /*即使 后台返回的是null  req.data也不是null  而是空字符串""  */
            //     if (req.data !== ""){  /*从登陆过来的   session中有当前登录用户的相关信息  对页面进行初始化*/
            //         this.currentUser.headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + req.data.headImg;
            //         this.currentUser.nickName = req.data.nickName;
            //         this.currentUser.motto = req.data.motto;
            //         this.currentUser.role = req.data.role;
            //         this.currentUser.uname = 'haohao'; // 这里先写死
            //     }
            // });

            // 接收用户名参数  并获取主人详细信息
            this.indexUname = this.$route.query.uname; // 当前 主页 的主人uname
            // restful 风格请求方式
            this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userSpGet + '/' + this.indexUname).then(req =>{
                if (req.data !== "") {
                    if (req.data.rs.result_code === 200) { /*查询成功   */
                        this.indexUser = req.data.user;

                        // 完整头像 url地址  和 时间
                        this.indexUser.headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + this.indexUser.headImg;
                        let nowTime = new Date();
                        let primaryTime = new Date(this.indexUser.regTime);
                        // postsList[i].sdfTime = dateTime.getFullYear() + '-' + (dateTime.getMonth() + 1) + '-' + dateTime.getDate() + ' ' + dateTime.getHours() + ':' + dateTime.getMinutes();
                        let age = new Date(nowTime.getTime() - primaryTime.getTime());
                        this.indexUser.age = age.getFullYear()-1970; // 自 1970 年开始

                        // 初始化
                    } else {  /*查询失败*/
                        this.$notify.error({
                            title: '错误',
                            message: req.data.rs.msg
                        });
                    }
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: '糟糕，服务器出事了。。'
                    });
                }
            });

            // 获取主页用户数量（包括 发帖数、评论数和加入贴吧数）信息
            this.getUserCountInfo();
        },
        mounted(){ // 此时 （不依赖v-for）节点已经渲染完毕
            // console.log("当前主页信息：" + this.indexUname);
            // 如果该主页是当前登录用户 则设置其显示 删除按钮  并初始化 列表
            console.log("indexUname:" + this.indexUname);
            if (this.currentUser.uname === this.indexUname){
                this.$refs.myPostList.setShowDel(true);
            }
            this.$refs.myPostList.initByUser("time", 1, this.pageSize, true, this.searchWd, this.indexUname, 0);
        },
        methods:{

            // 获取主页用户数量（包括 发帖数、评论数和加入贴吧数）信息
            getUserCountInfo(){
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userCountInfoGet + "?uname=" + this.indexUname).then(req => {
                    if (req.data !== '') {
                        if (req.data.rs.result_code === 200) { /*成功操作*/
                            this.countInfo.postCount = req.data.postCount;
                            this.countInfo.prCount = req.data.prCount;
                            this.countInfo.barCount = req.data.barCount;
                        }else {  /* 出现异常等清空*/
                            this.$message({
                                duration: 0,  //  不会自动关闭
                                showClose: true,
                                message: req.data.rs.msg + "错误码： " + req.data.rs.result_code,
                                type: 'error'
                            });
                        }
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '糟糕，服务器出事了。。',
                            duration: 0,   /*出错则设置为不自动关闭*/
                        });
                    }
                });
            },


            // 这里接收到的是引用的拷贝  实质还是修改同一个对象
            updateCurrentUser(newUser){
                // this.currentUser = newUser; // 因为是修改引用的指向， 所以这里的修改不会同步到顶部导航栏
                // 由于引用指向同一个对象  这里修改 this.currentUser（顶部导航栏user直接赋值） 会同步到顶部导航栏 （修改引用指向对象的属性）
                this.currentUser.headImg = newUser.headImg;
                this.currentUser.nickName = newUser.nickName;
                if (this.isMyIndex()){
                    /*这里先把currentUser转为json字符串，再把json字符串转为 js对象   实现深拷贝*/
                    this.indexUser = JSON.parse(JSON.stringify(newUser));
                    if (newUser.role === "管理员"){  //因为在 personInfo页面传来的是 editUser(他的role的值是“管理员”或“普通用户”，这里需要转一下才能判断)
                        this.indexUser.role = 'admin';
                    }else {
                        this.indexUser.role = 'user';
                    }
                }
            },

            // 点击搜索按钮触发方法
            doSearch(){
                switch (this.currentIndex) {
                    // (普通)帖子
                    case "1":
                        this.$refs.myPostList.initByUser("time", 1, this.pageSize, true, this.searchWd, this.indexUname, 0);
                        break;
                    // 贴吧
                    case "2":
                        /*根据条件重新获取贴吧列表*/
                        this.$refs.userBarList.init(0, null, this.indexUname, this.searchWd); // 剩下的参数 使用默认的参数（null）
                        break;
                    // 收藏
                    case "3":
                        // 如果不是自己的个人主页 不予搜索
                        if (!this.isMyIndex()){
                            this.$alert('您暂时没有权限查看此部分内容！', '警告', {
                                type: 'warning',
                                confirmButtonText: '确定',
                            });
                            return;
                        }
                        // 按照条件重新获取帖子
                        this.$refs.cltPostList.initByUser("time", 1, this.pageSize, true, this.searchWd, this.indexUname, 1);
                        break;
                    // 私密
                    case "4":
                        // 如果不是自己的个人主页 不予搜索
                        if (!this.isMyIndex()){
                            this.$alert('您暂时没有权限查看此部分内容！', '警告', {
                                type: 'warning',
                                confirmButtonText: '确定',
                            });
                            return;
                        }
                        this.$refs.pvtPostList.initByUser("time", 1, this.pageSize, true, this.searchWd, this.indexUname, 2);
                        break;
                    default:
                        this.$alert('未知错误！！ - doSearch', '错误！', {
                            type: 'error',
                            confirmButtonText: '确定',
                        });

                }
            },

            // 设置 结果总条目数
            setTotalRs(total){
                this.totalRs = total;
            },

            // 设置当前用户信息
            // 接收的是 对象的引用的拷贝 ，指向的是同一个对象，在父组件修改此对象会同步修改到子组件
            setCurrentUser(curUser){
                this.currentUser = curUser;

                // 如果该主页是当前登录用户 则设置其显示 删除按钮  并初始化 列表
                console.log("indexUname:" + this.indexUname);
                if (this.currentUser.uname === this.indexUname){
                    this.$refs.myPostList.setShowDel(true);
                }
                this.$refs.myPostList.initByUser("time", 1, this.pageSize, true, this.searchWd, this.indexUname, 0);
            },

            // 点击切换中部导航栏时触发
            // key 为 对应项的 index ， 参数类型为 string
            handleSelectNav(key) {
                // console.log(key, keyPath);
                console.log(key + "  -type-  " + typeof key);   // 3  -type-  string
                this.currentIndex = key;
                // 清空搜索关键字
                this.searchWd = "";
                this.totalRs = 0;

                // 普通帖子
                if (key === '1'){
                    // 显示哪个帖子列表 由 this.currentIndex 控制，再上面修改了 this.currentIndex这个变量，DOM不会立即更新，所以下面对 dom的引用会报 undefined
                    // 使用 this.$nextTick 进行 延迟回调， 再 dom 更新后 再回来继续执行
                    this.$nextTick(()=>{
                        if (this.isMyIndex()){
                            this.$refs.myPostList.setShowDel(true);
                        }
                        // 最后一个参数表示 普通帖子
                        this.$refs.myPostList.initByUser("time", 1, this.pageSize, true, this.searchWd, this.indexUname, 0);
                    });
                }
                // 贴吧
                else if (key === '2'){
                    // 显示哪个帖子列表 由 this.currentIndex 控制，再上面修改了 this.currentIndex这个变量，DOM不会立即更新，所以下面对 dom的引用会报 undefined
                    // 使用 this.$nextTick 进行 延迟回调， 再 dom 更新后 再回来继续执行
                    this.$nextTick(()=>{
                        // 初始化贴吧列表
                        this.$refs.userBarList.init(0, null, this.indexUname); // 剩下的参数 使用默认的参数（null）
                    });

                }
                // 收藏
                else if (key === '3'){
                    // 访问自己主页时 才对 帖子列表进行初始化
                    if (this.isMyIndex()){
                        // 最后一个参数表示 收藏帖子
                        this.$nextTick(()=>{
                            // 因为 是收藏的帖子, 所以必然不显示 删除按钮(即使收藏的是自己的帖子)
                            this.$refs.cltPostList.initByUser("time", 1, this.pageSize, true, this.searchWd, this.indexUname, 1);
                        });
                    }
                }
                // 私密
                else if (key === '4'){
                    // 访问自己主页时 才对 帖子列表进行初始化
                    if (this.isMyIndex()){
                        // 最后一个参数表示 私密帖子
                        this.$nextTick(()=>{
                            // 因为 是私密的帖子, 显示列表的必然显示删除按钮， 因为前面已经身份判断了，如果身份不对，帖子列表也不会显示
                            this.$refs.pvtPostList.setShowDel(true);
                            this.$refs.pvtPostList.initByUser("time", 1, this.pageSize, true, this.searchWd, this.indexUname, 2);
                        });
                    }
                }

                // key === '5'
                // 个人资料  因为是通过 v-bind 进行值的传递 在子组件的 created进行初始化，所以这里不需要额外的代码来重新进行初始化

            },

            /**
             * 判断当前主页是不是我的个人主页
             * @returns {boolean} true 是我的个人主页  false 不是
             */
            isMyIndex(){
                return this.currentUser.uname === this.indexUname;
            },
        },
        components:{
            "topNav": navigateBar,
            "copyRight": btmCopyRight,
            "postList": indexPostList,
            "barList": barList, // 贴吧模块 显示用户加入的贴吧
            'personInfo': personInfo,
        }

    }
</script>

<style scoped>
    /*左边帖子等 + 下面的搜索块 的border */
    .left_border{
        border-right: rgb(133, 97, 78) 1px dotted;
        border-bottom: 1px solid rgb(194, 183, 179);
    }

    /*帖子数、 评论数、 加入贴吧  对应标题 div*/
    .item_num_head{
        font-family: 宋体,serif;
        font-weight: bold;
        font-size: 16px;
        color: #8c9399;
    }

    /*帖子数、 评论数、 加入贴吧  对应数量 div*/
    .item_num_count{
        margin-top: 7px;
    }

    /*背景图 + 用户头像等  对应row 设置背景图、高度等*/
    .top_head_row{
        background-image: url("../../assets/images/myIndexBackground.jpg");
        background-size: 100%;
        /*x 轴向右偏移0px   y轴向下偏移-100  也就是向上偏移100px*/
        background-position: 0px -100px ;
        background-repeat: no-repeat;
        /*background-color: #f1d5b9;*/
        height: 220px;
    }

</style>